import styled from "styled-components";
import { Sidebar } from "@shadcn/sidebar";
import { Badge } from "@shadcn/badge";

export const StyledBadge = styled(Badge)`
  background: #ff7979;
  border-radius: 20px;
  padding: 2px 6px;
`;

export const StyledSidebar = styled(Sidebar)`
  background: whitesmoke;

  .account-summary {
    .all-comments {
      height: 32px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 10px;
      box-sizing: content-box;
      border-bottom: 1px solid hsl(var(--border));
    }
  }

  .account-controller {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 2px;
    font-size: 14px;
  }

  .menu-item {
    transition: 200ms;

    &:hover {
      background: #e9e9e9;
    }

    &.current {
      background: lightgrey;
    }
  }
`;
